import '../../../utils/shoelace-config.js';
import { css as styles } from './styles.js';
import { render } from './html.js';
import { bindEvents, clearSearch, focusInput } from './scripts.js';

class SearchFrame extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        
        this.render();
        this.bindEvents();
    }

    render() {
        // 清空内容
        this.shadowRoot.innerHTML = '';
        
        // 添加样式
        const style = document.createElement('style');
        style.textContent = styles;
        this.shadowRoot.appendChild(style);
        
        // 添加HTML内容
        this.shadowRoot.innerHTML += render();
    }

    bindEvents() {
        bindEvents(this.shadowRoot, this);
    }

    // 公共方法
    clearSearch() {
        clearSearch(this.shadowRoot);
    }

    focusInput() {
        focusInput(this.shadowRoot);
    }
}

customElements.define('search-frame', SearchFrame);